<template>
  <app-page>
    <div class="wallet-index">
      <div class="wallet_content">
        <div class="qianbao">
          <div class="title">
            <img src="@/assets/wallet/qianbao.png" style="width: 20px;height: 20px;margin-right: 8px" alt="">
            <div>能量钱包</div>
          </div>
          <div class="buttons">
            <div class="recharge" v-if="userStore.user.bank == 0" @click="activationShow = true">激活</div>
            <div class="recharge" v-if="userStore.user.bank != 0" @click="modifypasswordShow = true">修改转账密码</div>
            <div class="transfer" v-if="userStore.user.bank != 0" @click="transferShow = true">转账</div>
          </div>
        </div>
        <Balance :numdata="numdata" />
        <div class="wallet_bill">
          <img src="@/assets/wallet/zhangdan.png" style="width: 20px;height: 20px;margin-right: 8px" alt="">
          <div>我的账单</div>
        </div>
        <Table ref="tableRef" v-if="userStore.user.bank != 0" />
        <template v-if="userStore.user.bank == 0">
          <app-none :size="150"/>
        </template>
      </div>
    </div>
  </app-page>
  <Activation v-model="activationShow" />
  <Modify v-model="modifypasswordShow" />
  <Transfer v-model="transferShow" @change="changetrans" :numdata="numdata" />
</template>

<script setup>
import { http as uchttp } from '@/utils/uc-http'
import http from '@/utils/http'
import Balance from "./Balance.vue";
import Table from "./Table.vue";

import Activation from "./components/Activation.vue";
import Modify from "./components/Modify.vue";
import Transfer from "./components/Transfer.vue";

const userStore = useUserStore()
const tableRef = ref(null)
const activationShow = ref(false)
const modifypasswordShow = ref(false)
const transferShow = ref(false)
const numdata = ref({
  KZZ: 0,
  BKZZ: 0
})


const getvank = () => {
  uchttp.post('/blance_bank').then((res) => {
    numdata.value.KZZ = res.KZZ == undefined ? 0 : res.KZZ
    numdata.value.BKZZ = res.BKZZ == undefined ? 0 : res.BKZZ
  })
}

const changetrans = () => {
  tableRef.value.refresh()
  getvank()
}

onMounted(() => {
  if (userStore.user.bank != 0) {
    getvank()
  }
  
})

</script>

<style lang="scss" scoped>
.wallet-index {
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
  justify-content: center;
}

.wallet_content {
  width: 1000px;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 16px 0;
}

.qianbao {
  display: flex;
  justify-content: space-between;
  padding: 16px 0;

  .title {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 600;
    color: #333;
  }

  .buttons {
    display: flex;

    div {
      height: 32px;
      padding: 0 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .recharge {
      background-color: #ff7900;
      font-size: 14px;
      color: #fff;
    }

    .transfer {
      background-color: #f5f5f5;
      font-size: 14px;
      color: #333;
      margin-left: 16px;
    }
  }
}


.wallet_bill {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;

}
</style>